<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">订单详情</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<!-- 进行中和待结算 -->
			<view class="punch_box_fu" :style="status==2||status==4?'display:block;':'display:none;'">
				<!-- 内容区背景图 -->
				<view class="page_bg"><image :src="URL+'/JD_wx_img/pageTop_bg03.png'" mode="widthFix"></image></view>
				<view class="punch_box">
					<view :style="status==2?'display:block;':'display:none;'"><image :src="URL+'/JD_wx_img/property2.png'" class="dingdan_state" mode="widthFix"></image></view>
					<view :style="status==4?'display:block;':'display:none;'"><image :src="URL+'/JD_wx_img/property3.png'" class="dingdan_state" mode="widthFix"></image></view>
					<view class="punch_neirong">
						<view class="name">上下班记得按时打卡哦~</view>
						<view class="qiandao_l">
							<view class="q_name"><view class="choice" :class="user_first_time==false?'':'active'"></view>签到：</view>
							<view class="q_text">{{user_first_time==false?'待打卡':user_first_time}}</view>
						</view>
						<view class="qiandao_l">
							<view class="q_name"><view class="choice" :class="user_second_time==false?'':'active'"></view>签退：</view>
							<view class="q_text">{{user_second_time==false?'待打卡':user_second_time}}</view>
						</view>
						<view class="zhushi">应工作时长<view class="yan">{{time_hour}}</view>小时，实际工作时长<view class="yan">{{duration_hour}}</view>小时</view>
						<view class="daka_btn" @tap="punchClock" :class="clock==3?'active':''">{{clock==1?'上班打卡':''}}{{clock==2?'下班打卡':''}}{{clock==3?'打卡完成':''}}</view>
					</view>
					<view class="zhuxuyandan">
						<view class="yandan_left">
							<view class="name">允许酒店顺延订单</view>
							<view class="text">开启后则可能被商家继续录用继续上班</view>
						</view>
						<switch :checked="switchChecked" :class="clock==3?'active':''" :color="switchColor" @change="switchChange"/>
					</view>
				</view>
			</view>
			<!-- 已报名，等待商家确认 -->
			<view class="gangwei_top">
				<!-- 内容区背景图 -->
				<view class="page_bg" :style="status==1?'display:block;':'display:none;'"><image :src="URL+'/JD_wx_img/pageTop_bg03.png'" mode="widthFix"></image></view>
				<view class="gangwei_top_box">
					<image :src="URL+'/JD_wx_img/property1.png'"  :style="status==1?'display:block;':'display:none;'" class="dingdan_state" mode="widthFix"></image>
					<view class="details_name">岗位信息</view>
					<view class="details_yi">
						<view class="gangwei_name">{{type_text}}</view>
						<view class="jiage"><view class="yuan">¥</view><view class="nu">{{price}}</view>/小时</view>
					</view>
					<view class="ganwei_text">{{name}}<view class="jieshao" @tap="tojiudianjie">酒店介绍</view></view>
					<view class="xinxi_box">
						<view class="xinxi_list">
							<view class="name" style="background: url('https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img01.png') left center no-repeat">到岗时间</view>
							<view class="text red">{{arrival}}</view>
						</view>
						<view class="xinxi_list">
							<view class="name" style="background: url('https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img02.png') left center no-repeat">到岗地点</view>
							<view class="text">{{location}}</view>
						</view>
						<view class="xinxi_list">
							<view class="name" style="background: url('https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img03.png') left center no-repeat">乘车路线</view>
							<view class="text">{{route}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="zhaopin">
				<view class="details_name">招聘要求</view>
				<view class="zhaopin_text">{{condition}}</view>
			</view>
			<view class="dingdan_time">
				<view class="list">
					<view class="name">订单编号</view>
					<view class="text">{{number}}</view>
				</view>
				<view class="list">
					<view class="name">报名时间</view>
					<view class="text">{{createtime}}</view>
				</view>
			</view>
			<view class="public_btn public_btn01" @tap="quixaoBaoming" :style="status==1?'display:block;':'display:none;'">取消报名</view>
			<view class="public_btn public_btn02" @tap="toFanhuiUp">返回列表</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js";
	export default {
		data() {
			return {
				touHeight: 0,
				pageTop: 0,
				//域名拼接
				URL: app.globalData.URL,
				switchChecked: true,
				//
				status:'',//状态:1=已报名,2=进行中,4=待结算
				time_hour:'',//应工作时长
				renewal:'',//是否同意顺延用工
				time_hour:'',//应工作时长
				type_text:'',//岗位类型
				price:'',//薪资单价
				name:'',//酒店名称
				arrival:'',//到岗时间
				location:'',//到岗地点
				route:'',//乘车路线
				condition:'',//招聘要求
				number:'',//订单号
				createtime:'',//报名时间
				user_first_time:'',//用户第一次打卡时间，没有打卡返回false
				user_second_time:'',//用户第二次打卡时间，没有打卡返回false
				duration_hour:'',//实际工作时长
				clock:'',//打过卡的状态
				switchColor:'#E85426'//switch颜色
			}
		},
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			that.order_id = options.order_id;//列表传过来的id
			that.key = options.key;//列表传过来的key
			//城市定位
			uni.authorize({
				// 获取用户定位信息
				scope: "scope.userLocation",
				// 用户同意授权执行
				success(){
					// 引入腾讯地图api
					// 实例化API核心类
					var qqmapsdk = new QQMapWX({
						// 填写自己的Key值，这个值是与AppID绑定的
						key: 'HBABZ-XSB6G-3IJQ3-ITFD5-7NDTZ-O2FEO'
					 });
					//获取位置信息
					uni.getLocation({
						type: 'gcj02',
						success: function (res) {
							// 逆地址解析方法
							qqmapsdk.reverseGeocoder({
								success(res) {
									that.address = res.result.formatted_addresses.recommend
								}
							})	
						}
					})
				},
				// 若用户不同意授权，弹框提示
				fail(res){
					uni.showToast({
						icon :"none",
						title: '注意：需要获取您的定位授权,否则部分功能将无法使用',
						duration: 2000
					})
				}
			})
			// that.address = uni.getStorageSync('address')//首页获取的街道定位
			
			//订单详情内容接口
			uni.request({
				url: app.globalData.URL + '/api/v1/User/order?id='+that.order_id,
				method: "get",
				header:{
					token: uni.getStorageSync('token')
				},
				success: function (res) {
					that.status = res.data.data.status;//状态:1=已报名,2=进行中,4=待结算
					that.time_hour = res.data.data.time_hour;//应工作时长
					that.renewal = res.data.data.renewal;//是否同意顺延用工
					that.time_hour = res.data.data.time_hour;//应工作时长
					that.type_text = res.data.data.type_text;//岗位类型
					that.price = res.data.data.price;//薪资单价
					that.name = res.data.data.name;//酒店名称
					that.arrival = res.data.data.arrival;//到岗时间
					that.location = res.data.data.location;//到岗地点
					that.route = res.data.data.route;//乘车路线
					that.condition = res.data.data.condition;//招聘要求
					that.number = res.data.data.number;//订单号
					that.createtime = res.data.data.createtime;//报名时间
					that.user_first_time = res.data.data.user_first_time;//用户第一次打卡时间，没Id有打卡返回false
					that.user_second_time = res.data.data.user_second_time;//用户第二次打卡时间，没有打卡返回false
					that.duration_hour = res.data.data.duration_hour+'';//实际工作时长
					that.clock = res.data.data.clock;//打过卡的状态
					that.hotel_id = res.data.data.hotel_id//酒店id
					
					//switch是否可操作
					if(that.clock==3){
						that.switchColor = '#f3a991';
					}else{
						that.switchColor = '#E85426';
					}
					//判断是否同意顺延用工
					if(that.renewal==1){
						that.switchChecked = true;
					}else{
						that.switchChecked = false;
					}
				}
			})
		},
		methods: {
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//获取选择状态
			switchChange:function(e){
				var that = this;
				//订单详情内容接口
				uni.request({
					url: app.globalData.URL + '/api/v1/User/renewal?id='+that.order_id,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {}
				})
			},
			
			//取消报名
			quixaoBaoming(){
				var that = this;
				uni.request({
					url: app.globalData.URL + '/api/v1/Job/cancel?id='+that.order_id,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success:function(res){
						uni.setStorageSync('collectKey', that.key);
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							confirmColor:'#E85426',
							success(res){
								uni.navigateBack({
								    delta: 1
								})
							}
						})
					}
				})
			},
			
			//打卡
			punchClock(){
				var that = this;
				// 判断是第几次打卡
				if(that.user_first_time){
					wx.showModal({
						title:'提示',
						content:'请确认是否下班？',
						success: (res) => {
							if(res.confirm){
								that.requestApi()
							}
						}
					})
				}else{
					that.requestApi()
				}
			},
			// 请求打卡接口
			requestApi:function(){
				var that = this;
				uni.request({
					url: app.globalData.URL + '/api/v1/User/attendance?id='+that.order_id+'&location='+that.address,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success:function(res){
						if(res.data.code==0){
							wx.showToast({
							  title: res.data.msg,
							  icon: 'none',
							  duration: 1000
							})
						}else{
							if(res.data.data.number==1){
								that.user_first_time = res.data.data.time;
							}else{
								that.user_second_time = res.data.data.time;
							}
							that.duration_hour = res.data.data.duration_hour;//实际工作时间
							that.clock = res.data.data.clock;//打卡后的状态
							//switch是否可操作
							if(that.clock==3){
								that.switchColor = '#f3a991';
							}else{
								that.switchColor = '#E85426';
							}
							wx.showToast({
							  title: res.data.msg,
							  icon: 'success',
							  duration: 1000
							})
						}
					}
				})
			},
			
			//跳转到酒店介绍
			tojiudianjie:function(){
				var that = this;
				var hotel_id = that.hotel_id;//酒店Id
				var name = that.name;//酒店名字
				uni.navigateTo({
				    url: '../jiudian_brief/jiudian_brief?hotel_id='+hotel_id+'&name='+name,
				});
			},
		}
	}
</script>

<style>
	.page_content{
		padding: 0px;
		padding-bottom: 60rpx;
	}
	.gangwei_top{
		padding: 0px;
		border-radius: 0rpx;
		position: relative;
	}
	.xinxi_box{
		margin-top: 0px;
		padding: 30rpx;
		border-top: 2rpx solid #eee;
	}
	.xinxi_box .xinxi_list{
		margin: 7rpx 0px;
	}
	.details_yi{
		padding: 0px 30rpx;
		margin-top: 30rpx;
		line-height: 160%;
		position: relative;
	}
	.details_yi .gangwei_name{
		float: left;
		font-weight: 900;
		font-size: 44rpx;
		color: #333333;
	}
	.ganwei_text{
		font-weight: 900;
		font-size: 24rpx;
		color: #333333;
		margin: 20rpx 30rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/jiu_name_img.png) left center no-repeat;
		background-size: 32rpx 32rpx;
		padding-left: 40rpx;
	}
	.ganwei_text .jieshao{
		color: #3079DC;
		display: inline-block;
		margin-left: 10rpx;
	}
	.ganwei_text .jieshao:after{
		content: '';
		display: inline-block;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/sanjiao_img2.png) center center no-repeat;
		background-size: 36rpx 36rpx;
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}
	.dingdan_state{
		width: 786rpx;
		max-width: 100%!important;
		margin: 0px auto;
		margin-top: -65rpx;
		position: relative;
	}
	.gangwei_top_box{
		position: relative;
		z-index: 8;
		padding-top: 30rpx;
	}
	.dingdan_time{
		padding: 20rpx 30rpx;
		background: #fff;
		margin-top: 30rpx;
	}
	.dingdan_time .list{
		overflow: hidden;
		padding: 10rpx 0px;
	}
	.dingdan_time .list .name{
		float: left;
		font-weight: 900;
		font-size: 24rpx;
		color: #888888;
	}
	.dingdan_time .list .text{
		font-size: 24rpx;
		color: #888888;
		padding-left: 110rpx;
	}
	.topHeader{
		z-index: 100;
	}
	.pageTopImg {
		z-index: 80;
	}
	.punch_box_fu{
		margin-bottom: 30rpx;
		background: #fff;
	}
	.punch_box .dingdan_state{
		margin-top: -35rpx;
	}
	.punch_neirong{
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/punch_neirong_img.png) center center no-repeat;
		background-size: cover!important;
		padding: 30rpx;
		padding-bottom: 40rpx;
		position: relative;
	}
	.punch_neirong .name{
		font-weight: 900;
		font-size: 34rpx;
		color: #333333;
		margin-bottom: 25rpx;
	}
	.punch_neirong .qiandao_l{
		overflow: hidden;
		margin-top: 16rpx;
	}
	.punch_neirong .qiandao_l .q_name{
		font-size: 24rpx;
		color: #888888;
		float: left;
	}
	.punch_neirong .qiandao_l .q_name .choice{
		border: 1px dashed #E85426;
		border-radius: 6rpx;
		width: 32rpx;
		height: 32rpx;
		display: inline-block;
		vertical-align: middle;
		background: #fff;
		position: relative;
		top: -3rpx;
		margin-right: 10rpx;
	}
	.punch_neirong .qiandao_l .q_name .choice.active{
		background: #E85426 url(https://jianzhi.huanyuweizhi.com/JD_wx_img/choice_img.png) center center no-repeat;
		border: 1px solid #E85426;
		background-size: 32rpx 32rpx;
	}
	.punch_neirong .qiandao_l .q_text{
		font-size: 24rpx;
		color: #333333;
		padding-left: 75rpx;
	}
	.punch_neirong .zhushi{
		font-size: 24rpx;
		color: #888888;
		margin-top: 16rpx;
	}
	.punch_neirong .yan{
		display: inline-block;
		color: #E85426;
		font-weight: 900;
	}
	.punch_neirong .daka_btn{
		width: 240rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #E85426;
		border-radius: 50rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		position: absolute;
		right: 30rpx;
		top: 50%;
		margin-top: -50rpx;
	}
	.punch_neirong .daka_btn.active{
		background: #f3a991;
		pointer-events: none;
	}
	.zhuxuyandan{
		overflow: hidden;
		padding: 16rpx 30rpx;
	}
	.zhuxuyandan .yandan_left{
		float: left;
	}
	.zhuxuyandan .yandan_left .name{
		font-size: 34rpx;
		color: #1A1A1A;
	}
	.zhuxuyandan .yandan_left .text{
		font-size: 20rpx;
		color: #888888;
		margin-top: 10rpx;
	}
	.zhuxuyandan switch{
		float: right;
		margin-top: 12rpx;
	}
	.zhuxuyandan switch.active{
		pointer-events: none;
	}
</style>
